<template>
    <div class="tinymce-editor">
        <Editor
            id="tinymce"
            :init="init"
            v-model="content"
        ></Editor>
    </div>
</template>

<script>
    import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
    import Editor from '@tinymce/tinymce-vue'//编辑器引入
    import 'tinymce/themes/silver/theme'//编辑器主题
    import 'tinymce/plugins/link'  //超链接
    import 'tinymce/plugins/paste'  //粘贴过滤
    import 'tinymce/plugins/preview'  //预览
    import 'tinymce/plugins/image'  //图片插入
    import 'tinymce/plugins/code' 
    import 'tinymce/plugins/advlist' 
    import 'tinymce/plugins/wordcount'
export default {
    name:'Tinymce',
    props: {
        plugins: {
            type: [String, Array],
            default: () => ['link', 'preview', 'paste','image','code','advlist','wordcount']
        },
        editText : String
    },
    data() {
        return {
            init: {
                selector: '#tinymce',
                height:630,
                width:'100%',
                language_url: "/tinymce/langs/zh_CN.js",
                language: "zh_CN",
                skin_url: '/tinymce/skins/ui/oxide',
                content_css: `/tinymce/skins/content/default/content.css`,
                plugins: this.plugins,//插件
                // //工具栏
                // menubar: true, //隐藏菜单栏
                toolbar: 'undo redo|bold italic forecolor|bullist numlist|link preview|alignLeft alignCenter alignRight alignJustify |code wordcount', //字体大小
                // height: 500,//高度
                placeholder: '在这里输入文字',
                branding: false,//隐藏右下角技术支持
                resize:false,
                images_upload_handler :(blobInfo, succFun, failFun)=>{
                    let file = blobInfo.blob();
                    let formData = new FormData();
                    formData.append('file',file);
                    this.$store.dispatch('personalCenter/reqInsertPic', formData).then((result)=>{
                        succFun(result.data.data)
                    });                    
                }
            },
            content:''
        };
    }, 
    mounted(){
        tinymce.init({})
    },
    watch: {
        content(newValue, oldValue) {
            this.$emit('TEXT',this.content)
        },
        editText(newValue, oldValue){
            if(newValue){
                this.content = newValue;
            }
        }
    },
    components: {
        Editor
    }
}
</script>

<style lang="less">
    .tinymce-editor{
        width: 100%;
    }
</style>